{% load static %}
<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="canonical" href="https://getbootstrap.com/docs/3.4/examples/dashboard/">
    <script src="{% static 'app01/js/jquery-3.6.0.js' %}"></script>
    <title>Generate testcases</title>
    <link href="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.35/dist/css/bootstrap.min.css"
          rel="stylesheet">
    <link rel="stylesheet" href="{% static 'app01/css/input_for_modal.css' %}">
    <link href="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.35/examples/dashboard/dashboard.css"
          rel="stylesheet">
    <script src="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.35/assets/js/ie8-responsive-file-warning.js"></script>
    {#    <script src="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.35/assets/js/ie-emulation-modes-warning.js"></script>#}
    {#    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>#}
    {#    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>#}
    <![endif]-->
</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">用例生成小工具</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">退出</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="container-fluid">
    <div class="row" style="margin-left: 1px; margin-right: 1px">
        <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
                {% block left_nav %}
                    <li{% block active_project_manage %}{% endblock %}><a
                            href="{% url 'projectManage:project_manage' %}">项目管理 <span
                            class="sr-only">(current)</span></a>
                    </li>
                    <li {% block active_case_manage %}class="active"{% endblock %}><a href="{% url 'app01:index' %}">用例管理</a>
                        <ul class="nav-pills nav-stacked" style="list-style-type: none; display: block;">
                            {% block nav_1 %}
                                <li {% block active_case_show %}{% endblock %}><a
                                        href="{% url 'app01:index' %}">用例展示</a></li>{% endblock %}
                            <li {% block active_new_page %}{% endblock %}><a
                                    href="{% url 'app01:new_page' %}">新增页面用例管理</a></li>
                            <li {% block active_edit_page %}{% endblock %}><a href="{% url 'app01:edit_page' %}">编辑页面用例管理</a>
                            </li>
                            <li {% block active_delete_page %}{% endblock %}><a href="{% url 'app01:delete_page' %}">删除功能用例管理</a>
                            </li>
                            <li {% block active_search_page %}{% endblock %}><a href="{% url 'app01:search_page' %}">查询功能用例管理</a>
                            </li>
                            <li {% block active_import_page %}{% endblock %}><a href="{% url 'app01:page_import' %}">导入功能用例管理</a>
                            </li>
                            <li {% block active_export_page %}{% endblock %}><a href="{% url 'app01:export_page' %}">导出功能用例管理</a>
                            </li>
                            <li {% block active_component %} {% endblock %}><a href="{% url 'app01:component' %}">常用控件用例管理</a>
                            </li>
                        </ul>
                    </li>
                    <li {% block active_template %}{% endblock %}><a href="{% url 'caseTemplate:case_template' %}">配置用例模板管理</a>
                    </li>
                    <li {% block active_report %}{% endblock %}><a
                            href="{% url 'caseReportManage:case_report_manage' %}">用例报告管理</a></li>
                    <li {% block active_user %}{% endblock %}><a href="{% url 'userManage:userManage' %}">用户管理</a></li>
                {% endblock left_nav %}
            </ul>
        </div>
        <div style="padding-left: 2px; padding-right: 2px"
             class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <h4 class="sub-header left">{% block sub_header %}新增页面用例管理{% endblock sub_header %}</h4>

            <div class="table-responsive">
                <div>
                    {% block search %}
                        <form class="form-inline"
                              action="{% block search_url %}{% url 'app01:search_case' %}{% endblock search_url %}"
                              id="form_Condition" method="get">
                            {% csrf_token %}
                            <label for="startTime">创建起始：</label>
                            <input type="date" class="form-control input-sm" id="start_date" name="start_date"
                                    {% block search_start %}{% endblock %}
                                   style="width: 165px;margin-right: 5px">
                            <label for="endTime">创建结束：</label>
                            <input type="date" class="form-control input-sm" id="end_date" name="end_date"
                                    {% block search_end %}{% endblock %} style="width: 165px;margin-right: 5px">
                            {% block search_condition %}<label for="case_title">用例标题：</label>
                                <input class="form-control" id="case_title" name="case_title"
                                        {% block search_case_title %}{% endblock %}
                                       style="width: 120px;margin-right: 5px">{% endblock %}
                            <label for="case_title">创建人：</label>
                            <input class="form-control" id="case_creator" name="case_creator"
                                    {% block search_case_creator %}{% endblock %}
                                   style="width: 120px;margin-right: 5px">
                            <br/>
                            <br/>
                            <div class="btn-group">
                                <button type="button" class="btn btn-secondary btn-sm" id="btn_Clear"
                                        onclick="function back_to_index() {
                                                window.location.href='{% block back_url %}{% url "app01:index" %}{% endblock %}';
                                                }
                                                back_to_index()">清空
                                </button>
                                <button type="submit" class="btn btn-info btn-sm" id="btn_Search">查询
                                </button>
                            </div>
                        </form>
                    {% endblock %}
                </div>
                <br/>
                {% block button %}
                    <div class="btn-group" role="group" aria-label="Basic example">
                        {% block not_in_index %}
                            <button type="button" data-toggle="modal" data-target="#GenerateModal"
                                    class="btn btn-primary">用例生成
                            </button>
                        {% endblock %}
                        <button type="button" class="btn btn-primary" disabled>批量编辑</button>
                        <button type="button" class="btn btn-primary" disabled>批量删除</button>
                        <button type="button" data-toggle="modal" data-target="#createCaseModal"
                                class="btn btn-primary">新增
                        </button>
                        <button type="button" class="btn btn-primary" onclick="window.location.href='{% block export_url %}{% url "app01:new_page_export_excel" %}{% endblock %}'">导出</button>
                        <button type="button" class="btn btn-primary" onclick="window.location.reload()">刷新</button>
                    </div>
                {% endblock %}
                <div>
                    {% block table %}
                        <table class="table table-striped table-bordered table-responsive">
                            <thead>
                            <tr>
                                <th style="width: 10px"><input type="checkbox"></th>
                                <th style="width: 50px">序号</th>
                                <th nowrap="nowrap">项目名称</th>
                                <th nowrap="nowrap">用例标题</th>
                                <th nowrap="nowrap">前置条件</th>
                                <th nowrap="nowrap">用例步骤</th>
                                <th nowrap="nowrap">创建人</th>
                                <th nowrap="nowrap">创建时间</th>
                                <th nowrap="nowrap">用例等级</th>
                                <th nowrap="nowrap">预期结果</th>
                                <th nowrap="nowrap">实际结果</th>
                                <th nowrap="nowrap">备注</th>
                                <th hidden="hidden">ID</th>
                                <th nowrap="nowrap">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for case in pages %}
                                <tr style="font-size: 10px">
                                    <td><input type="checkbox" value="{{ case.id }}"></td>
                                    <td>{{ forloop.counter }}</td>
                                    <td>{{ case.project.project_name }}</td>
                                    <td>{{ case.title }}</td>
                                    <td>{{ case.pre_condition }}</td>
                                    <td style="WORD-BREAK: break-all; WORD-WRAP: break-word">{{ case.case_steps }}</td>
                                    <td>{{ case.creator }}</td>
                                    <td>{{ case.create_time|date:'Y-m-d H:i' }}</td>
                                    <td>{{ case.case_level }}</td>
                                    <td>{{ case.expect_result }}</td>
                                    <td>{{ case.real_result }}</td>
                                    <td>{{ case.remarks }}</td>
                                    <td hidden="hidden">{{ case.id }}</td>
                                    <td nowrap="nowrap">
                                        <button data-toggle="modal" data-target=".bs-example-modal-lg"
                                                onclick="showDialog(this)">修改
                                        </button>
                                        <a href="
                                                {% block delete_url %}{% url 'app01:new_page_delete' case.id %}{% endblock %}"
                                           id="{{ case.id }}" onclick="return deleteJob()">删除</a>
                                    </td>
                                </tr>

                            {% endfor %}
                            </tbody>
                        </table>
                    {% endblock %}
                    {% block edit_script %}
                        <script>
                            function showDialog(obj) {
                                $('#EditModal').modal('show');
                                var tds = $(obj).parent().parent().find('td');
                                {#if(tds.eq(2).text() === '自动化运维'){#}
                                    {#$(".project_name").val("<select class='form-control project_name' required style='margin-bottom: 2px; margin-top: 2px; height: 34px; width: 196px' name='auth' id='auth' >\n" +#}
                                    {#    "<option selected value=\"自动化运维\">自动化运维</option>\n" +#}
                                    {#    "</select>")#}
                                    {#console.log("自动化运维");#}
                                    {#let obj1 = $(".selector1").find("option[text='自动化运维']")#}
                                    {#if(obj1){#}
                                    {#    obj1.attr("selected",true);#}
                                    {#    console.log("selected")#}
                                    {#$("#selector1 option[text='自动化运维']").attr("selected", true);#}
{#$("#select_id option[text='jQuery']").attr("selected", true);#}
{#                                }#}
                                $(".project_name").val($(tds.eq(2)).text());
                                $(".case_title").val($(tds.eq(3)).text());
                                $(".pre_condition").val($(tds.eq(4)).text());
                                $(".case_steps").val($(tds.eq(5)).text());
                                $(".creator").val($(tds.eq(6)).text());
                                var create_time = $(tds.eq(7).text()).selector
                                var create_time1 = create_time.split(' ').join('T')
                                $(".create_time").val(create_time1);
                                console.log(create_time1)
                                $(".level").val($(tds.eq(8)).text());
                                $(".expect_result").val($(tds.eq(9)).text());
                                $(".real_result").val($(tds.eq(10)).text());
                                $(".remarks").val($(tds.eq(11)).text());
                                $(".case_id").val($(tds.eq(12)).text());
                            }

                            function deleteJob() {
                                return confirm("确定要删除吗?");
                            }

                        </script>
                    {% endblock %}
                    <div class="modal fade" id="GenerateModal" tabindex="-1" role="dialog"
                         aria-labelledby="myModalLabel"
                         aria-hidden="true">
                        <div class="modal-dialog" style="width: {% block modal_width %}940{% endblock %}px">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;
                                    </button>
                                    <h4 class="modal-title" id="GenerateModalLabel">用例生成</h4>
                                </div>
                                <form class="form-inline" action="" method="post">
                                    {# 靠内嵌的网页提交请求 #}
                                    <div style="height: 460px">
                                        {# block iframe_url用于选取不同的网页嵌入 #}
                                        <iframe id="iframe_generate" src="
                                                {% block iframe_url %}{% url 'app01:new_row' %}{% endblock iframe_url %}"
                                                width="{% block width_size %}938{% endblock %}px"
                                                height="460px"></iframe>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                    </div>
                                </form>
                            </div><!-- /.modal-content -->
                        </div><!-- /.modal -->
                    </div>
                    {% block edit_modal %}
                        <div class="modal fade" id="EditModal" tabindex="-1" role="dialog"
                             aria-labelledby="myModalLabel"
                             aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                            &times;
                                        </button>
                                        <h4 class="modal-title" id="EditModalLabel">用例修改</h4>
                                    </div>
                                    <form class="form-inline"
                                          action="{% block edit_url %}{% url 'app01:edit_case' %}{% endblock %}"
                                          method="post">
                                        {% csrf_token %}
                                        <div class="modal-body">
                                            <label style="width: 70px" for="case_id">ID：</label>
                                            <input name="case_id" class="form-control input_for_modal case_id" type="text" id="case_id" readonly>
                                            <label for="case_title">用例标题：</label>
                                            <input name="case_title" class="form-control input_for_modal case_title" type="text" id="case_title" required>
                                            <label for="project_name">项目名称：</label>
{#                                            <select class='form-control project_name selector1' required style='margin-bottom: 2px; margin-top: 2px; height: 34px; width: 196px' name='project_name' id='selector1' >#}
{#                                                {% for project in projects %}#}
{#                                                    <option value="{{ project.project_name }}">{{ project.project_name }}</option>#}
{#                                                {% endfor %}#}
{#                                            </select>#}
                                            <input name="project_name" class="form-control input_for_modal project_name" type="text" id="project_name" readonly>

                                            <label for="pre_condition">预置条件：</label>
                                            <input name="pre_condition" class="form-control input_for_modal pre_condition" type="text" id="pre_condition">
                                            <label for="level">用例等级：</label>
                                            <select name="level" id="level" class="form-control input_for_modal" style="width: 196px">
                                                <option value="1">1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                            </select>
                                            <br>
                                            <label for="case_steps">用例步骤：</label>
                                            <textarea id="case_steps" style="height: 96px; width: 557px;" name="case_steps" class="form-control input_for_modal case_steps"></textarea>
                                            <label style="width: 70px" for="creator">创建人：</label>
{#                                            <select class='form-control' required style='margin-bottom: 2px; margin-top: 2px; height: 32px; width: 165px' name='creator' id='creator'>#}
{#                                                {% for user in users %}#}
{#                                                    <option value="{{ user.user_name }}">{{ user.user_name }}</option>#}
{#                                                {% endfor %}#}
{#                                            </select>#}
                                            <input name="creator" class="form-control input_for_modal creator" type="text" id="creator" readonly>

                                            <label style="width: 70px" for="create_time">创建时间：</label>
                                            <input name="create_time" class="form-control input_for_modal create_time"
                                                   type="datetime-local" id="create_time">
                                            <br>
                                            <label for="expect_result">预期结果：</label>
                                            <textarea name="expect_result" id="expect_result"
                                                      style="height: 50px; width: 557px;"
                                                      class="form-control input_for_modal expect_result" cols="30"
                                                      rows="10"></textarea>
                                            <label for="real_result">实际结果：</label>
                                            <input name="real_result" class="form-control input_for_modal real_result"
                                                   type="text" id="real_result">
                                            <label style="width: 70px" for="remarks">备注：</label>
                                            <input name="remarks" class="form-control input_for_modal remarks" style="width: 210px;" type="text" id="remarks">
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                            </button>
                                            <button type="submit" class="btn btn-primary">提交</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    {% endblock %}
                    {% block create_modal %}
                        <div class="modal fade" id="createCaseModal" tabindex="-1" role="dialog"
                             aria-labelledby="myModalLabel"
                             aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                        </button>
                                        <h4 class="modal-title" id="myModalLabel">用例新增</h4>
                                    </div>
                                    <form class="form-inline" action="

                                            {% block create_case_url %}{% url 'app01:create_case' %}{% endblock create_case_url %}"
                                          method="post">
                                        {% csrf_token %}
                                        <div class="modal-body">
                                        <label for="project_name">项目名称：</label>
                                            <select class='form-control project_name selector1' required style='margin-bottom: 2px; margin-top: 2px; height: 34px; width: 196px' name='project_name' id='project_name' >
                                                {% for project in projects %}
                                                    <option value="{{ project.project_name }}">{{ project.project_name }}</option>
                                                {% endfor %}
                                            </select>
                                            <label for="case_title">用例标题：</label>
                                            <input name="case_title" class="form-control input_for_modal" type="text"
                                                   id="case_title" required>
                                            <label for="pre_condition">预置条件：</label>
                                            <input name="pre_condition" class="form-control input_for_modal" type="text"
                                                   id="pre_condition">
                                            <br>
                                            <label for="case_steps">用例步骤：</label>
                                            <textarea id="case_steps" style="height: 96px; width: 544px;"
                                                      name="case_steps"
                                                      class="form-control input_for_modal case_steps"></textarea>

                                            <label style="width: 70px" for="creator">创建人：</label>
                                            <select class='form-control' required style='margin-bottom: 2px; margin-top: 2px; height: 34px; width: 196px' name='creator' id='creator' >
                                                {% for user in users %}
                                                    <option value="{{ user.user_name }}">{{ user.user_name }}</option>
                                                {% endfor %}
                                            </select>
                                            <label for="level">用例等级：</label>
                                            <select name="level" id="level" class="form-control input_for_modal"
                                                    style="width: 196px">
                                                <option value="1">1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                            </select>
                                            {#                                        <input name="level" required class="form-control input_for_modal" type="text" id="level">#}
                                            <label for="expect_result">预期结果：</label>
                                            <textarea name="expect_result" id="expect_result"
                                                      style="height: 50px; width: 544px;"
                                                      class="form-control input_for_modal expect_result" cols="30"
                                                      rows="10"></textarea>

                                            <label style="width: 70px" for="remarks">备注：</label>
                                        <textarea name="remarks" id="remarks"
                                                      style="height: 50px; width: 544px;"
                                                      class="form-control input_for_modal remarks" cols="30"
                                                      rows="10"></textarea>
{#                                            <input name="remarks" class="form-control input_for_modal" type="text"#}
{#                                                   id="remarks">#}
                                            {% block case_total %}<label style="width: 70px" for="remarks">页面类型：</label>
                                                <select name="page_type" style="width: 177px;"
                                                        class="form-control input_for_modal"
                                                        id="page_type">
                                                    <option value='新增'>新增</option>
                                                    <option value='编辑'>编辑</option>
                                                    <option value='删除'>删除</option>
                                                    <option value='查询'>查询</option>
                                                    <option value='导入'>导入</option>
                                                    <option value='导出'>导出</option>
                                                </select>{% endblock %}
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                            </button>
                                            <button type="submit" class="btn btn-primary">提交</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>{% endblock %}
                </div>
                <div style="float: right;">
                    <ul class="pagination">

                        <li class="page-item">
                            {% if pages.has_previous %}
                                <a href="{% block page_url %}{% url 'app01:index' %}{% endblock %}?current_page={{ pages.previous_page_number }}{% block params %}{% endblock %}">上一页</a>
                            {% endif %}
                        </li>
                        {% if pages.number > 6 %}
                            <li class="page-item">
                                <a class="page-link"
                                   href="{% block first_page %}{% url 'app01:index' %}{% endblock %}?current_page={{ 1 }}{% block first_page_parmas %}
                                   {% endblock %}">首页</a>
                            </li>
                        {% endif %}
                        {% for page in page_range %}

                            {% if pages.number == page %}
                                <li class="page-item">
                                    <a style="background: lightblue" href="javascript:return false;"
                                       onclick="return false;" class="page-link">{{ page }}</a>
                                </li>
                            {% else %}
                                <li class="page-item">
                                    <a class="page-link"
                                       href="{% block page_url_2 %}{% url 'app01:index' %}{% endblock %}?current_page={{ page }}{% block params2 %}{% endblock %}">{{ page }}</a>
                                </li>
                            {% endif %}
                        {% endfor %}
                        {% if last_page %}
                            <li class="page-item">
                                <a class="page-link"
                                   href="{% block last_page %}{% url 'app01:index' %}{% endblock %}?current_page={{ paginator.num_pages }}{% block last_page_params %}{% endblock %}">末页</a>
                            </li>
                        {% endif %}
                        <li class="page-item">
                            {% if pages.has_next %}
                                <a class="page-link"
                                   href="{% block page_url_3 %}{% url 'app01:index' %}{% endblock %}?current_page={{ pages.next_page_number }}{% block params3 %}{% endblock %}">下一页</a>
                            {% endif %}
                        </li>
                        <li class="page-item "><a class="page-link" disabled="True"
                                                  href="javascript:return false;">共{{ paginator.num_pages }}页{{ paginator.count }}条记录</a>
                        </li>
                    </ul>
                </div>

            </div>

        </div>
    </div>
</div>
</div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
        crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.35/assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.35/dist/js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.35/assets/js/vendor/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.35/assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
